<template>
	<div class="page">
		<el-page-header @back="$router.history.go(-1)" content="活动参与人"></el-page-header>
		<el-table
			border
			size="mini"
			:data="teamUserList">
			<el-table-column label="账号" prop="username"></el-table-column>
			<el-table-column label="手机号" prop="phone"></el-table-column>
			<el-table-column label="昵称" prop="nickname"></el-table-column>
			<el-table-column label="活动状态">
				<template v-slot="{row}">
					<el-tag v-if="row.isDeal == 0">
						待支付
					</el-tag>
					<el-tag v-else type="success">
						已支付
					</el-tag>
				</template>
			</el-table-column>
			<el-table-column label="头像" >
				<template v-slot="{row}">
					<el-image style="width: 100px;height: 100px;border-radius: 9px;" 
						fit="cover" 
						:src="row.face"
						:preview-src-list="[row.face]"
						>
					</el-image>
				</template>
			</el-table-column>
		</el-table>
		
	</div>
</template>

<script>
	// 引入vuex的state和actions的映射对象用来映射store中定义的state和actions
	import { mapState,mapActions } from 'vuex'
	export default{
		// 定义了组件的名称，用来结合keep-alive缓存页面
		name:'goods',
		data(){
			return {
				
			}
		},
		computed:{
			...mapState('teamModel',['teamUserList']),
			// 格式化日期的计算属性
			formatTime(){
				return function(time){
					console.log(time)
					let d = new Date(time);
					return `${d.getFullYear()}-${d.getMonth()+1}-${d.getDate()} ${d.getHours()}:${d.getMinutes()}:${d.getSeconds()}`
				}
			}
		},
		// 当第一次打开页面时会执行created生命周期
		async created(){
			let id = this.$route.query.id
			await this.getTeamUserList(id)
		},
		methods:{
			...mapActions('teamModel',['getTeamUserList','deleteById','getGoodsTypeListAll','setIsOnSale']),
		}
	}
</script>

<style>
</style>
